<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <i class="fas fa-landmark"></i>
        <h3>乡村文化遗产数字化保护平台</h3>
        <p class="mb-0">欢迎您的登录系统</p>
      </div>
      <div class="login-body">
        <div v-if="error" class="alert alert-danger">
          <i class="fas fa-exclamation-circle mr-2"></i>
          {{ error }}
        </div>
        
        <form @submit.prevent="handleLogin">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="fas fa-user"></i>
                </span>
              </div>
              <input type="text" v-model="username" class="form-control" 
                     placeholder="请输入用户名" required>
            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="fas fa-lock"></i>
                </span>
              </div>
              <input type="password" v-model="password" class="form-control" 
                     placeholder="请输入密码" required>
            </div>
          </div>
          <button type="submit" class="btn btn-login">
            <i class="fas fa-sign-in-alt mr-2"></i>登录
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    handleLogin() {
      // 这里添加登录逻辑
      if (this.username !== 'admin' || this.password !== '123456') {
        this.error = '用户名或密码错误，请重试'
        return
      }
      
      // 清除错误信息
      this.error = ''
      // 这里可以添加跳转到首页的逻辑
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
/* 登录页面样式 */
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1e4d92, #2c3e50);
  padding: 20px;
}

.login-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: fadeIn 0.5s ease-out;
  width: 100%;
  max-width: 400px;
}

.login-header {
  background: linear-gradient(135deg, #1e4d92, #2c3e50);
  color: white;
  padding: 20px;
  text-align: center;
}

.login-header i {
  font-size: 3rem;
  margin-bottom: 10px;
}

.login-body {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-control {
  border-radius: 20px;
  padding: 12px 20px;
  height: auto;
  border: 1px solid #ddd;
}

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(30,77,146,0.25);
  border-color: #1e4d92;
}

.btn-login {
  background: linear-gradient(135deg, #1e4d92, #2c3e50);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 12px 20px;
  width: 100%;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  background: linear-gradient(135deg, #2c3e50, #1e4d92);
  color: white;
}

.input-group-text {
  background: transparent;
  border-right: none;
  border-radius: 20px 0 0 20px;
}

.input-group .form-control {
  border-left: none;
  border-radius: 0 20px 20px 0;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.alert {
  border-radius: 15px;
  margin-bottom: 20px;
  animation: fadeIn 0.5s ease-out;
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-card {
    margin: 20px;
  }
}
</style>